import React from 'react';
import { WingBlank, WhiteSpace, List, Flex, Table } from 'antd-mobile';
import _ from 'lodash';
import moment from 'moment';
import styles from './VipAccList.less';

class VipAccList extends React.Component {


  render() {
    console.log('积分兑换',this.props)
    const {remainAcc, data} = this.props
    return (
    <div className={styles.accwrap}>
      <div className={styles.accheader}>
        <div className={styles.accnumber}>{remainAcc ? remainAcc : 0}</div>
      </div>
      {/* //body */}
      <div className={styles.accbody}>
        {data.data.map( v => (
        <div className={styles.accitem} key={v._id}>
          <div className={styles.accitemleft}>
            <div className={styles.itemleftTop}>
              <h2>{v.coupon.couponTitle}</h2>
              <h2>福利券</h2>
            </div>
            {/* endDate  startDate */}
            <div className={styles.itemrleftBottom}>有效期：{moment(v.coupon.startDate).format('YYYY-MM-DD')}至{moment(v.coupon.endDate).format('YYYY-MM-DD')}</div>
          </div>
          <div className={styles.accitemright}>
             <div className={styles.itemrightTop}>{v.accNum}积分</div>
             <div className={styles.itemrightBottom}>兑换</div>
          </div>
       </div>
        ))}
      </div>

      {/* //body */}
    </div>);
  }
}

VipAccList.propTypes = {
  remainAcc: React.PropTypes.number,
  data: React.PropTypes.object,
};

export default VipAccList;
